不刷新页面提交数据

用户登录功能，其原理是在客户端通过表单提交用户名和密码，将数据提交到服务器中，在服务器中完成对提交用户名和密码的验证，从而判断这个用户是否可以登录。

但是如果通过 AJAX 技术来实现该功能，那么不需要刷新页面，或者说不需要重新加载程序，就可以完成用户名和密码的验证，从而减少了刷新页面的等待时间。

创建 system 文件夹，载入 Smarty 模板和 ADODB 类库，创建 system.class.inc.php 文件，定义连接和操作数据库的方法；创建 system.smarty.inc.php 文件，定义配置 Smarty 的方法；创建 system.inc.php 文件，实现类的实例化操作 -
创建 index.tpl 模板页，完成用户登录页面的设计。首先，嵌入 JavaScript 脚本文件 createxmlhttp.js ，初始化 XMLHttpRequest 对象，嵌入 check.js 完成对用户提交用户名和密码的验证，通过 open 方法调用 reg_chk.php 文件完成异步请求，并将 AJAX 的响应通过 div 返回客户端
然后，创建表单，完成用户名和密码的提交，其中通过 onBlur 事件对用户填写的数据进行验证，通过 onClick 事件调用 showsimple 方法完成用户登录的验证
最后，创建 div 标记，输出 AJAX 响应的结果
创建 index.php 文件，获取模板变量中传递的值，并指定模板页

createxmlhttp. js 的代码如下：

✂️

var xmlhttp = false; // 初始化变量
// //如果 ActiveXObject 存在，说明是 IE 5.0 以上的版本，否则使用 XMLHttpRequest 创建
if (window.ActiveXObject) {
  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
}

check. js 的关键代码如下：

✂️

function showsimple() {
  // 创建主控制函数
  if (register.name.value == '') {
    // 判断用户名是否为空
    register.name.focus();
    return false;
  }
  if (register.pwd1.value == '') {
    // 判断密码是否为空
    register.pwd1.focus();
    return false;
  }
  if (register.yzm.value == '') {
    // 判断验证码是否为空
    register.yzm.focus();
    return false;
  }
  if (register.yzm.value != register.yzm2.value) {
    // 判断输入的验证码是否正确

    alert(' 校验码输入错误！ ');
    register.yzm.focus();
    return false;
  }
  var username = document.getElementById('name').value; // 获取表单提交的用户名
  var password = document.getElementById('pwd1').value; // 获取密码
  var post_method = 'user=' + username + ' ＆ pass=' + password; // 构造 URL 参数
  xmlhttp.open('POST', 'reg_chk.php', true); // 调用指定的添加文件
  xmlhttp.setRequestHeader(
    'Content-Type',
    'application/x-www-form-urlencoded;',
  );
  //设置请求头信息
  xmlhttp.onreadystatechange = StatHandler; // 判断 URL 调用的状态值并处理
  xmlhttp.send(post_method); // 将数据发送给服务器
}
function StatHandler() {
  // 定义处理函数
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 判断如果执行成功，则输出下面内容
    document.getElementById('webpage ').innerHTML = xmlhttp.responseText; // 将服务器返回的数据定义到 DIV 中
  }
}
function chkyzm(form) {
  // 对验证码进行验证
  if (form.yzm.value == '') {
    yzm1.innerHTML = '<font color=#FF0000> 请输入校验码！ </font>';
  } else if (form.yzm.value != form.yzm2.value) {
    yzm1.innerHTML = '<font color=#FF0000> 校验码输入错误 !</font>';
  } else {
    yzm1.innerHTML = '<font color=green>输入正确 </font>';
  }
}
function yzm(form) {
  // 生成验证码
  var num1 = Math.round(Math.random() * 10000000);
  var num = num1.toString().substr(0, 4);
  console.log("<img name=coding src='yzm.php?num=" + num + "'>");
  form.yzm2.value = num;
}
function code(form) {
  // 重置验证码
  var num1 = Math.round(Math.random() * 10000000);
  var num = num1.toString().substr(0, 4);
  document.coding.src = 'yzm.php?num=' + num;
  form.yzm2.value = num;
}

在 reg_chk.php 文件中，对 POST 方法提交的用户名和密码进行验证，并输出验证结果。其代码如下：

✂️

php

<?php session_start();// 初始化 session
变量 header('Content-type:text/html;charset=gb2312'); $sql="select*from tb_user where name='".$\_POST['user']."'and password='".md5
($_POST['pass'])."'"
// 定义 SQL 语句
require_once("system/system.inc.php");
// 调用指定的文件
$arrayBetel=$admindb->ExecSQL($sql,$conn);
// 执行 select 查询语句
  if(!$arrayBetel){
echo" 登录失败，用户名或密码错误，请重新登录 " }else{ $_SESSION['member']=$\_POST[user]; echo$\_POST[user]."登录成功 "." ＆ nbsp; ＆ nbsp; ＆ nbsp; ＆ nbsp;"."<a href='#'> 由此进入主页 </a>"} ?>